<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>333</li>
      <p>222</p>
      <span>111</span>
    </ul>
    <script>
      var ulEle = document.querySelector("ul");
      //    ulEle.attachEvent("onclick",function(e){
      //        var e = e || window.event;
      //         // console.log(e.target);
      //         // console.log(e.srcElement);

      //    })
      bindEvent(ulEle, "click", function (event) {
        var e = event || window.event;
        var target = e.target || e.srcElement;
        console.log(target);
      });
      //写兼容性函数 能用addEventListener的 就是可以用e.target
      function bindEvent(ele, eventName, fn) {
        // 判断浏览器是否支持 addEventListener方法
        if (window.addEventListener) {
          // 有addEventListener 是chrome浏览器
          ele.addEventListener(eventName, fn);
        } else {
          // ie8或者以下；
          ele.attachEvent("on" + eventName, fn);
        }
      }
      // target定义：
      // target 属性规定哪个 DOM 元素触发了该事件。
      // target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。(target得不到文本节点 所以如果要点击文本改变 就套一个span)

      // 语法：
      // event.target
      // event.target.nodeName 　　//获取事件触发元素标签名（li，p，div，img，button…）
      // event.target.id　　　　　　//获取事件触发元素id
      // event.target.className　　//获取事件触发元素classname
      // event.target.innerHTML　 //获取事件触发元素的内容（li）
    </script>
  </body>
</html>
